<template>
  <div class="cesium">
    <h2>使用第三方库实现地图</h2>
    <h3>
      请手动在node_modules/mockjs/dist/mock.js文件第8363行前添加
      this.custom.xhr.responseType = this.responseType
    </h3>
    <div id="cesiumContainer" class="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "Cesium",
};
</script>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmYWJhNjY2Yi1lNzRiLTQ3YWUtYWQ2ZS0yMWZiYTY1MTYzZTkiLCJpZCI6MTY4NjUxLCJpYXQiOjE2OTU3MjI3NzF9.V15GGNKdW8biTnmq_xi0l2q4A6eJXGAtxWIPxzz-V7U";

  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
  });
});
</script>

<style scoped lang="scss">
.cesium {
  width: 100%;
  height: 100%;
  h3,
  h2 {
    text-align: center;
  }

  .cesiumContainer {
    width: 100%;
    height: 90%;
  }
}
</style>
